<template>
  <el-dialog v-model="visible" title="详情" :width="detail?.width" :before-close="close">
    <el-card>
      <el-row :gutter="detail?.formConfig?.gutter">
        <el-col :span="24 / detail?.formConfig?.span" v-for="item in Object.keys(detail.form)">
          <span style="font-weight: 700">{{ item }} : </span>
          <span>{{ detail.form[item] }}</span>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>

<script setup>
  import { reactive, inject } from 'vue';

  const visible = inject('detailVisible');
  const close = inject('closeDetail');
  const detail = inject('detailFormData');

  const cancel = () => {
    close();
  };
</script>

<style scoped lang="scss">
  .el-col {
    margin-bottom: 20px;
  }
</style>
